﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>

<div id="app">

    <table width="100%">
        <tr>
            <td>
                <font color="black">您正在做的业务是：人力资源--招聘管理--简历管理--简历筛选</font>
            </td>
        </tr>
        <tr>
            <td align="right">
                <el-button type="primary" v-on:click="submitForm">开始</el-button>
            </td>
        </tr>
    </table>
    <table width="100%" border="1" cellpadding="0" cellspacing="1" class="TABLE_STYLE1">
        <tr>
            <td class="TD_STYLE1" width="30%">请选择职位分类</td>
            <td class="TD_STYLE2" width="70%">
                <el-select v-model="form.humanMajorKindId" placeholder="请选择职位分类编号" value-key="humanMajorKindId" style="width: 240px" v-on:change="onSelectChangeCMK">
                    <el-option v-for="item in CMKFrom"
                               :key="item.majorKindId"
                               :label="item.majorKindName"
                               :value="item.majorKindId" />
                </el-select>
                <el-select v-model="form.humanMajorId" placeholder="--请选择--" value-key="humanMajorId" style="width: 240px">
                    <el-option v-for="item in CMForm"
                               :key="item.majorId"
                               :label="item.majorName"
                               :value="item.majorId" />
                </el-select>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">请输入关键字</td>
            <td class="TD_STYLE2">
                <el-input v-model="form.HumanName" class="right-aligned-input"></el-input>
            </td>
        </tr>
        <tr>
            <td class="TD_STYLE1">请输入登记时间</td>
            <td class="TD_STYLE2">

                <el-date-picker v-model="form.ksRegistTime" placeholder="" class="right-aligned-input" style=""></el-date-picker>

                至

                <el-date-picker v-model="form.enRegistTime" placeholder="" class="right-aligned-input" style=""></el-date-picker>

                （YYYY-MM-DD）
            </td>
        </tr>
    </table>
    <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="resId" label="档案编号"></el-table-column>
        <el-table-column prop="humanName" label="姓名"></el-table-column>
        <el-table-column prop="humanSex" label="性别"></el-table-column>
        <el-table-column prop="humanMajorKindName" label="职位分类"></el-table-column>
        <el-table-column prop="hunmaMajorName" label="职位昵称"></el-table-column>

        <el-table-column prop="humanHomephone" label="电话号码"></el-table-column>
        <el-table-column align="right" label="复核状态">
            <template #default="scope">
                {{state(scope.row.checkStatus)}}
            </template>
        </el-table-column>
        <el-table-column align="right" label="复核">
            <template #default="scope">
                <el-button size="small"
                           type="danger"
                           v-on:click="Shengqing(scope.row)">
                    复核
                </el-button>
            </template>
        </el-table-column>
    </el-table>


    <div id="pageDiv">
        <span class="span1">  总数：{{pageCount}} 例    当前第{{pageIndex}}页 /每页显示 {{pageSize}} 条    共 {{page}} 页  </span>
        <div class="div">
            <button v-on:click="HomePage()">首页</button>
            <button v-on:click="PreviousPage()">上一页</button>
            <button v-on:click="NextPage()">下一页</button>
            <button v-on:click="LastPage()">尾页</button>
            跳到第
            <input type="text" style="width: 30px;height: 20px;" v-model="pages">
            <a>页</a>
            <button v-on:click="GoTo()">
                <img src="~/images/go.bmp" />
            </button>
        </div>
    </div>

</div>
<script>
    const { createApp, reactive, ref, computed, onMounted } = Vue;
    const { ElNotification } = ElementPlus;

    const app = createApp({
        setup() {
            const tableData = ref([])
            const pageCount = ref()//总记录数
            const pageIndex = ref(1)//当前页数
            const pageSize = ref(5)//每页显示数
            const num = ref(1)//复试状态
            const page = computed(() => {
                return Math.ceil(pageCount.value / pageSize.value)
            });//总页数
            const pages = ref()//跳转到的页数
            //日期转换
            function formatDateTime(date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
             //分页查询
            function fill() {
                axios.get("/ER/ERSelectSie", {
                    params: {
                        flid: form.humanMajorKindId,
                        ncid: form.humanMajorId,
                        name: form.HumanName,
                        time: form.ksRegistTime,
                        timimo: form.enRegistTime,
                        CheckStatus:num.value,
                        pageIndex: pageIndex.value,
                        pageSize: pageSize.value
                    }
                }).then(res => {
                    // 转换 res.data.list 中的数据
                    // const formattedData = res.data.map(item => ({
                    //     ...item, 复制原始对象的所有属性
                    //     registTime: formatDateTime(new Date(item.registTime)),
                    //     deadline: formatDateTime(new Date(item.deadline))
                    // }));


                    tableData.value = res.data
                }).catch(err => {
                    console.info("/ER/ERSelectSie报错,报错信息:" + err);
                })
            }
            //查询总条数
                //查询总条数
            function Count() {
             axios.get("/ER/ERSelectCount77", {
            params: {
                flid: form.humanMajorKindId,
                ncid: form.humanMajorId,
                name: form.HumanName,
                time: form.ksRegistTime,
                timimo: form.enRegistTime,
                CheckStatus: num.value,
            }
        }).then(res => {
            console.info(res.data)
            pageCount.value = res.data
        }).catch(Error => {
            console.info(Error)
        })
    }
            // Count();
            // fill();

            //首页
            function HomePage() {
                pageIndex.value = 1;
                fill();
            }

            //上一页
            function PreviousPage() {
                if (pageIndex.value != 1) {
                    pageIndex.value -= 1;
                    fill();
                }
            }

            //下一页
            function NextPage() {
                if (pageIndex.value != page.value) {
                    pageIndex.value += 1;
                    fill();
                }
            }

            //尾页
            function LastPage() {
                pageIndex.value = page.value;
                fill();
            }
                // :row-class-name="tableRowClassName"

            //转到页数
            function GoTo() {
                if (!isNaN(pages.value)) {
                    if (pages.value > page.value || pages.value < 1) {
                        alert("输入的页数有误！")
                        pages.value = ""
                    } else {
                        pageIndex.value = Number(pages.value)
                        pages.value = ""
                        fill();
                    }
                } else {
                    alert('你输入的不是数字！')
                }
            }


            const form = reactive({
                // 职位分类编号
                humanMajorKindId: '',
                // 职位编号
                humanMajorId: '',
                //姓名
                HumanName: '',
                //开始时间
                ksRegistTime: '',
                //结束时间
                enRegistTime: '',
            })


            //点击事件
            function submitForm(){
                console.info(form)
                fill();
                Count();
            };

            function Shengqing(row) {
                window.location.href = "/ER/IndexJLCXFH?id=" + row.resId;
            }



            //职位分类设置对象CMK
            const CMKFrom = ref([]);
            //职位设置表 CM
            const CMForm = ref([]);
            //查询数据
            const SelectCMK = async () => {
                try {
                    const resopnse = await axios.get("/EMR/CMKSelectMax")

                    CMKFrom.value = resopnse.data;
                    console.log(CMKFrom.value)
                } catch (error) {
                    console.log("下拉框数据错误", error)

                }
            };
            //选择职位分类,显示不同的职位名称 监听
            const onSelectChangeCMK = async (value) => {

                const reponse = await axios.get(`/EMR/CMSelectId?id=${value}`)

                CMForm.value = reponse.data;

            }

            onMounted(() => {

                SelectCMK();


            })
            const openDatePicker = (target) => {
                // 假设这里调用一个日期选择器库
                console.log(`打开日期选择器针对: ${target}`);
            };

            function state(row) {
                if (row == 1) {
                    return "待复核"
                }
            }

            return {



                CMKFrom,
                CMForm,
                onSelectChangeCMK,
                form,
                submitForm,
                tableData,
                state,
                Count,
                tableData,
                pageCount,
                pageIndex,
                pageSize,
                page,
                pages,
                fill,
                HomePage,
                PreviousPage,
                NextPage,
                LastPage,
                GoTo,
                Shengqing,
                formatDateTime
            };
        },
    }).use(ElementPlus).mount('#app');
</script>

<style type="text/css">
    :root {
        --primary-color: #409EFF;
        --background-color: #FFFFCC;
        --table-background: #FFFFBB;
        --header-background: #FFDB6F;
        --border-color: #DEDBD6;
        --font-size: 14px;
        --line-height: 1.5;
    }
    
    #pageDiv {
        padding: 10px;
    }

    .div {
        width: 450px;
        height: 25px;
        /* background-color: black; */
        margin-left: 400px;
        margin-top: -26px;
        line-height: 25px;
    }

    .span1 {
        font-size: 15px;
    }

.div button {
    margin: -102px 5px;
    background-color: #00000000;
    border: 0px;
    color: #000000;
}

    .div a {
        margin: 0 5px;
    }

    a {
        text-decoration: none;
        color: white;
    }



     tbody, td, tfoot, th, thead, tr {
        border-color: inherit;
        background-color: #ffffbb;
        border-style: solid;
        border-width: 0;
    }
    body, #app {
        background-color: var(--background-color);
        color: #333;
        font-family: Arial, sans-serif;
        font-size: var(--font-size);
        line-height: var(--line-height);
        margin: 0;
        padding: 0;
    }

    .custom-table {
        width: 100%;
        border-collapse: collapse;
        background-color: var(--table-background);
    }

        .custom-table th,
        .custom-table td {
            padding: 8px;
            border: 1px solid var(--border-color);
            text-align: left;
        }

        .custom-table th {
            background-color: var(--header-background);
            font-weight: bold;
        }

    .action-column {
        white-space: nowrap;
    }

    button {
        display: inline-block;
        padding: 6px 12px;
        margin: 4px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        button:hover {
            background-color: darken(var(--primary-color), 10%);
        }

    input[type="number"] {
        width: 50px;
        height: 28px;
        padding: 0 5px;
        text-align: center;
        vertical-align: middle;
    }

    #pageDiv {
        margin-top: 20px;
        text-align: left; /* 确保所有内容默认向左对齐 */
    }

        #pageDiv span.span1 {
            display: block;
            margin-bottom: 10px;
        }

        #pageDiv .div {
            text-align: left; /* 确保分页控件向左对齐 */
        }

    .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
    }

    .demo-pagination-block .demonstration {
        margin-bottom: 16px;
    }


    #app {
        background-color: #ffffcc;
    }

    .custom-table {
        background-color: #ffffcc !important;
    }

        /* 确保表格行也有相同的背景颜色 */
        .custom-table .el-table__row {
            background-color: #ffffcc !important;
        }

    .custom-table {
        width: 100%;
        background-color: #ffffcc;
    }

        .custom-table th,
        .custom-table td {
            background-color: inherit !important; /* 确保表头和单元格继承表格背景色 */
        }

    .full-width-column {
        width: 100%;
    }

    .action-column {
        white-space: nowrap;
    }


    body {
        background-color: #ffffcc;
    }

    .TABLE_STYLE1 {
        width: 100%;
    }

    /*     .TD_STYLE1 {
                    background-color: #f0f0f0;
                    padding: 8px;
                    font-weight: bold;
                } */

    .TD_STYLE2 {
        padding: 8px;
    }

    . TD_STYLE4 {
        line-height: 36px; /* 使标签高度与输入框一致 */
        vertical-align: middle;
        margin-left: 0;
        display: grid;
        place-items: center;
    }

    .el-form-item__content {
        margin-left: 0px !important;
    }
    /* 去除浏览器默认宽度 */
    body .container, body main {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-width: none !important;
    }

    body {
        font-size: 13px;
        background-color: #ffffcc;
    }

    .BUTTON_STYLE1 {
        BORDER-RIGHT: #2C59AA 1px solid;
        PADDING-RIGHT: 2px;
        BORDER-TOP: #2C59AA 1px solid;
        PADDING-LEFT: 2px;
        FONT-SIZE: 12px;
        background: linear-gradient(to bottom, #ffffff, #C3DAF5);
        BORDER-LEFT: #2C59AA 1px solid;
        CURSOR: pointer;
        COLOR: black;
        PADDING-TOP: 2px;
        BORDER-BOTTOM: #2C59AA 1px solid
    }

    .TABLE_STYLE1 {
        border: 1px solid;
        border-color: #000000;
        border-collapse: collapse;
        width: 100%;
        
    }

    .TD_STYLE1 {
        background-color: #FFDB6F;
        border-width: 1px;
    }

    .TD_STYLE2 {
        border-spacing: 1px;
        background-color: #FFFFBB;
        border-color: #DEDBD6;
        border: 0;
    }

    .INPUT_STYLE1 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 30%
    }

    .TEXTAREA_STYLE1 {
        BACKGROUND-COLOR: #FFFFCC;
        width: 100%;
    }

    table:nth-of-type(2) {
        border: 1px solid black;
        border-collapse: collapse;
    }

        table:nth-of-type(2) td {
            border: 1px solid black;
        }

</style>